<template>
  <div class="info">
    <div class="info--hd">
      <div class="avatar">
        <img src="../assets/avatar.png" alt="avatar">
        <div class="avatar-right">
          <p class="username">{{username}}</p>
          <p class="otherInfo">{{otherInfo}}</p>
        </div>
      </div>
      <a href="javascript:;" class="btn--like">我要点赞</a>
    </div>

    <div class="info--bd">
      <ul>
        <li>
          <span>所属大赛:</span>
          <span>2019年中国青少年书法美术征集展示活动</span>
        </li>
        <li>
          <span>作品分类:</span>
          <span>国画</span>
        </li>
        <li>
          <span>参赛组别:</span>
          <span>青年院校组</span>
        </li>
        <li>
          <span>所属院校:</span>
          <span>中国中央美院</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data() {
    return {
      username: '红色的风筝',
      otherInfo: '17岁·重庆'
    }
  }
}
</script>

<style lang="stylus" scoped>
  .info {
    margin 20px 0 0 20px
    border-bottom 1px solid rgb(234, 234, 234)
  }

  .info--hd {
    display flex
    padding-right 20px
    justify-content space-between
    align-items center

    .avatar {
      display flex
      align-items center

      img {
        width 48px
        height 48px
        border-radius 50%
        margin-right 10px
      }

      .avatar-right {
        .username {
          font-size 16px
          color rgb(17,17,17)
          margin-bottom 3px
        }

        .otherInfo {
          position relative
          display flex
          align-items center
          font-size 12px
          color rgb(170,170,170)
          padding-left 14px

          &::before {
            content ""
            position absolute
            left 0
            width 12px
            height 14px
            margin-right 2px
            background url('../assets/female.svg') no-repeat center
            background-size 12px
          }
        }
      }
    }

    .btn--like {
      display flex
      align-items center
      justify-content center
      width 150px
      height 40px
      border-radius 20px
      font-size 14px
      color #fff
      text-align center
      background linear-gradient(to bottom, rgb(255, 189,93), rgb(252, 130, 37))

      &::before {
        content ""
        display inline-block
        width 20px
        height 20px
        background url('../assets/like-white.svg') no-repeat center
        background-size 18px
        margin-right 5px
      }
    }
  }

  .info--bd {
    margin 25px 0 20px 0

    ul li {
      line-height 25px

      span {
        font-size 14px
        color #000
      }

      span:first-child {
        margin-right 28px
        color rgb(170, 170, 170)
      }
    }
  }
</style>
